<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="涉农申报列表"></u-navbar> -->
		<view class="fixed-top bg-white">

			<view class="px-2 mt-2 pb-2 dfes">
				<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
					bg-color="#fff" v-model="searchStr" :action-style="actionStyle" @search="searchHandler"
					@custom="searchHandler" @clear="searchHandler"></u-search>

			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>
		<view class=" mt-12 pl-2 pr-2">
			<!-- style="height: calc(100vh - 50px);" -->
			<view class="dfex mt-2 pt-2">
				<view class="tab-item pb-1" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)"
					:class="{ 'active': currentTab === index }">
					{{ tab.title }}
				</view>
			</view>
			<view class="dfex pt-3 pb-3" v-for="(item, index) in dataList" :key="index"
				style="border-bottom: 2px dashed #EFEFEF; ">
				<view style="max-width: 450rpx;">
					<view class="dfel">
						<template v-if="item.abnormal">
							<view class="text-BD3124 wrap" style="width: 177px;">{{item.enterpriseName}}</view>
							<view class="ml-2 bg-F5C9C5 text-BD3124 pl-1 pr-1 rounded p">异常</view>
						</template>
						<template v-else >
							<view class="text-333 wrap">{{item.enterpriseName}}</view>
						</template>

					</view>
					<view class="dfes" style="flex-wrap: wrap;">
						<view class="mr-2 mt-2  p-1 font-12 rounded  bg-FCE07F" :key="indx"
							v-for="(lableItem, indx) in item.agricultureLabelArr">
							<view class="text-FFC251">{{lableItem}}</view>
						</view>
					</view>
				</view>

				<template v-if="currentTab===1">
					<view class="bg-CECECE p-1 rounded-circle font-14 text-white" @click="jump(item.id)">已通过，去查看</view>
				</template>
				<template v-else>
					<view v-if="item.followAgricultureState == 'approval'"
						class="bg-CECECE p-1 rounded-circle font-14 text-white">查看申请审核中</view>
					<view v-if="item.followAgricultureState == 'reject'"
						class="bg-danger p-1 rounded-circle font-14 text-white"
						@click="showFollowReturnReason(item.id,item.followReturnReason)">已驳回,点击查看原因</view>
					<view v-if="item.followAgricultureState==null||item.followAgricultureState==undefined"
						class="bg-78AB06 p-1 rounded-circle font-14 text-white" @click="showApplyView(item.id)">申请查看主体信息
					</view>
				</template>

			</view>
			
			<view v-if="!hasMore && dataList.length > 0" class="text-center mt-3 mb-3">
				<view class="text-muted">没有更多数据了</view>
			</view>
			<view v-else-if="!hasMore && dataList.length === 0" class="text-center mt-3 mb-3">
				<view class="text-muted">暂无数据</view>
			</view>
			<view v-else class="text-center mt-3 mb-3">
				<view class="btn btn-primary">加载更多</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from "@/common/free-lib/request.js";
	export default {
		data() {
			return {
				actionStyle: {
					color: '#8ED0F2'
				},
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				tabs: [{
					title: '涉农主体列表',
					url: '/brand/user/upper/agricultureList'
				}, {
					title: '可查看列表',
					url: '/brand/user/upper/viewableList'
				}],
				currentTab: 0,
				dataList: [],
				currentUrl: "/brand/user/upper/agricultureList",
				searchStr: "",
                hasMore: true, // 是否还有更多数据
			}
		},
		computed: {

		},
		onLoad(options) {
			this.getAgricultureList();
		},
		onReachBottom() {
			this.form.pageNo++;
			this.getAgricultureList();
		},
		onPullDownRefresh() {
			this.form.pageNo = 1;
			this.dataList = [];
			this.getAgricultureList();
		},
		methods: {
			showFollowReturnReason(id, followReturnReason) {
				const that = this;
				uni.showModal({
					title: '驳回理由',
					confirmText: "重新申请",
					content: followReturnReason,
					success: function(res) {
						if (res.confirm) {
							that.showApplyView(id, true);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			},
			searchHandler() {
				this.form.pageNo = 1;
				this.dataList = []
				this.getAgricultureList();
			},
			jump(id) {
				uni.navigateTo({
					url: "/pages/tabbar/index/AgricultureDetails?id=" + id,
				});
			},
			changeTab(index) {
				this.currentTab = index;
				this.currentUrl = this.tabs[index].url;
				this.form.pageNo = 1;
				this.dataList = [];
				this.getAgricultureList();
			},
			showApplyView(id, again = false) {
				const that = this;
				let url = again ? "/brand/user/upper/anewFollow" : "/brand/user/upper/follow";
				uni.showModal({
					title: '填写申请原因',
					editable: true,
					placeholderText: "请填写申请原因",
					success: function(res) {
						if (res.confirm) {
							if (!res.content) {
								uni.showToast({
									title: '请填写申请原因',
									icon: 'error'
								});
								return;
							}
							uni.showLoading({
								title: '加载中'
							});
							$H.post(url + '?id=' + id + "&applicationReason=" + res.content, {

								}, {})
								.then(res => {
									uni.hideLoading();
									if (res.success) {
										uni.showToast({
											title: '提交成功',
											icon: 'success'
										});
										uni.showModal({
											content: "提交成功\n请等待平台管理员审核，审核通过即可查看涉农主体信息",
											showCancel: false,
											success: function(res) {
												that.pageNo = 1;
												that.dataList = [];
												that.getAgricultureList();
											}
										});
										return;

									} else {
										uni.showToast({
											title: res.message || '提交失败',
											icon: 'error'
										});
									}
								})
								.catch(error => {
									uni.hideLoading();
									console.error('请求出错', error); // 处理任何错误  
									uni.showToast({
										title: '提交失败',
										icon: 'error'
									});
								});
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			},
			getAgricultureList() {
				uni.showLoading({
					title: '加载中'
				})
				$H.get(
						this.currentUrl, {
							...this.form,
							enterpriseName: this.searchStr
						}, {}
					)
					.then((res) => {
						uni.stopPullDownRefresh();
						uni.hideLoading()
						if (res.result.records.length == 0) {
							uni.showToast({
								title: "没有更多啦！",
								icon: "success",
							});
							return;
						}

						for (let i = 0; i < res.result.records.length; i++) {
							const item = res.result.records[i];
							if (item.agricultureLabel) {
								item.agricultureLabelArr = item.agricultureLabel.split(',');
							}
						}
						this.dataList.push(...res.result.records);
						this.form.total = res.result.total;
						this.hasMore = this.dataList.length < this.form.total;
					})
					.catch((error) => {
						uni.hideLoading()
						uni.stopPullDownRefresh();
						console.error("请求出错", error); // 处理任何错误
					});
			},
		}
	}
</script>

<style>
	.tab-item {
		font-size: 16px;
		cursor: pointer;
		position: relative;
	}

	.tab-item.active {
		font-size: 16px;
		color: #8ED0F2;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background-color: #8ED0F2;
	}
</style>